<%@page import="com.opensymphony.xwork2.ActionContext"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.milk_shop.model.Food" %>
<%@taglib uri="/struts-tags" prefix="s" %>
<% 
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%Food food=(Food)ActionContext.getContext().get("food"); %>
<base href="<%=basePath %>"/>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品详情页</title>
  <link rel="stylesheet" href="css/detail.css">
  <link rel="stylesheet" href="css/back-button.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/modernizr-custom-v2.7.1.min.js"></script>
</head>
<body>
<div class="Xcontent">
    <button class="shinydarken">返回</button>
    <ul class="Xcontent01">
      <div class="Xcontent06"><img
          src="<%=food.getCover()%>"></div>
      <ol class="Xcontent08">
        <div class="Xcontent07"><img
            src="<%=food.getCover()%>"></div>  
        <%if(food.getDetileImages().size()>0){ %>
        <div class="Xcontent09"><img
            src="<%=food.getDetileImages().get(0).getUrl()%>"></div>
        <%}if(food.getDetileImages().size()>1){ %>
        <div class="Xcontent10"><img
            src="<%=food.getDetileImages().get(1).getUrl()%>">
        </div>
        <%}if(food.getDetileImages().size()>2){ %>
        <div class="Xcontent11"><img
            src="<%=food.getDetileImages().get(2).getUrl() %>"></div>
        <%}if(food.getDetileImages().size()>3){ %>
        <div class="Xcontent12"><img
            src="<%=food.getDetileImages().get(3).getUrl()%>">
        </div>
        <%} %>
      </ol>
      <ol class="Xcontent13">
        <div class="Xcontent14"><a href="#">
            <p><%=food.getName() %></p>
          </a></div>
        <div class="Xcontent15"><img src="images/detailPage/X11.png"></div>
        <div class="Xcontent16">
          <p> </p>
        </div>
        <div class="Xcontent17">
          <p class="Xcontent18">售价</p>
          <p class="Xcontent19">￥<span><%=food.getPrice() %></span></p>
          <div class="Xcontent20">
            <p class="Xcontent21">折扣优惠</p>
            <p class="Xcontent22"><%=food.getDisCountString() %></p>
          </div>
          <div class="Xcontent23">
            <p class="Xcontent24">销量</p>
            <p class="Xcontent25"><%=food.getSales() %></p>
          </div>
          <div class="Xcontent23">
            <p class="Xcontent24">制作时间</p>
            <p class="Xcontent25"><%=food.getTime() %>分钟</p>
          </div>
          <div class="Xcontent23">
            <p class="Xcontent24">推荐理由</p>
            <p class="Xcontent25"><%=food.getReason() %></p>
          </div>
        <div class="Xcontent34"><a href="/shoppingcart/get"><img src="images/detailPage/X17.png"></a></div>
        <div class="Xcontent35"><a href="order/addFood?foodId=<%=food.getId() %>"><img src="images/detailPage/X18.png"></a></div>
      </ol>
    </ul>
  </div>

  <script>
    $(document).ready(function () {
      var $miaobian = $('.Xcontent08>div');
      var $huantu = $('.Xcontent06>img');
      var $miaobian1 = $('.Xcontent26>div');
      $miaobian.mousemove(function () { miaobian(this); });
      $miaobian1.click(function () { miaobian1(this); });
      function miaobian(thisMb) {
        for (var i = 0; i < $miaobian.length; i++) {
          $miaobian[i].style.borderColor = '#dedede';
        }
        thisMb.style.borderColor = '#cd2426';

        $huantu[0].src = thisMb.children[0].src;
      }
      function miaobian1(thisMb1) {
        for (var i = 0; i < $miaobian1.length; i++) {
          $miaobian1[i].style.borderColor = '#dedede';
        }
        //		thisMb.style.borderColor = '#cd2426';
        $miaobian.css('border-color', '#dedede');
        thisMb1.style.borderColor = '#cd2426';
        $huantu[0].src = thisMb1.children[0].src;
      }
      $(".Xcontent33").click(function () {
        var value = parseInt($('.input').val()) + 1;
        $('.input').val(value);
      })

      $(".Xcontent32").click(function () {
        var num = $(".input").val()
        if (num > 0) {
          $(".input").val(num - 1);
        }
      })
    });

    $(".shinydarken").click(function () {
      window.location.href = "order/getAll"
    })
  </script>
</body>
</html>